<script lang="ts" setup>
import { getOneByCondition, updateOne } from '@/api/method';
import type { Department } from '@/types';
import { isAdmin, urls } from '@/utils';

const currentDepartmentId = defineModel('currentDepartmentId', { type: Number });

const currentDepartmentLabel = defineModel('currentDepartmentLabel', {
  type: String
});

const department = reactive<Department>({});

const setDepartment = (data: Department) => {
  department.id = data.id;
  department.level = data.level;
  department.label = data.label;
  department.reference = data.reference;
  department.pid = data.pid;
  department.parent = data.parent;
  department.managerUsername = data.managerUsername;
  department.deputyManagerUsername = data.deputyManagerUsername;
  department.manager = data.manager;
  department.isRoot = data.isRoot;
  department.isLeaf = data.isLeaf;
  department.children = data.children;
  department.peopleQuantity = data.peopleQuantity;
  department.peopleQuantityInCurrent = data.peopleQuantityInCurrent;
};

watch(
  () => currentDepartmentId.value,
  async (value: number | undefined) => {
    if (value) {
      const res = (await getOneByCondition<Department>(urls.department, 'id', value)) as Department;
      setDepartment(res);
    }
  },
  {
    immediate: true
  }
);

const handleUpdate = async () => {
  const tem: Department = {
    id: department.id,
    level: department.level,
    reference: department.reference,
    managerUsername: department.managerUsername,
    deputyManagerUsername: department.deputyManagerUsername,
    isRoot: department.isRoot,
    isLeaf: department.isLeaf
  };

  const res = (await updateOne<Department>(urls.department, tem)) as Department;

  setDepartment(res);
};
</script>
<template>
  <hq-form :model="department">
    <hq-row>
      <el-input v-model="department.id" readonly v-if="false" />
      <hq-col>
        <el-form-item label="组织层级">
          <el-select v-model="department.level">
            <HqDictionary type-text="组织层级" />
          </el-select>
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="组织名称">
          <el-input v-model="department.label" readonly />
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="组织代码">
          <el-input v-model="department.reference" />
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="上级部门">
          <HqCascaderDepartment v-model="department.pid" disabled />
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="组织经理">
          <el-select v-model="department.managerUsername" filterable> <HqUserOptions /> </el-select>
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="分管领导">
          <el-select v-model="department.deputyManagerUsername" filterable>
            <HqUserOptions />
          </el-select>
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="是否根节点">
          <el-select v-model="department.isRoot" disabled>
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="是否叶节点">
          <el-select v-model="department.isLeaf" disabled>
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="部门人数">
          <el-input v-model="department.peopleQuantityInCurrent" readonly />
        </el-form-item>
      </hq-col>
      <hq-col>
        <el-form-item label="部门人数（含子级）">
          <el-input v-model="department.peopleQuantity" readonly />
        </el-form-item>
      </hq-col>
    </hq-row>
    <el-button type="primary" style="width: 100%" @click="handleUpdate" v-if="isAdmin()">
      保存
    </el-button>
  </hq-form>
</template>
<style lang="scss" scoped></style>
